<nz-row class="optionRow">
  <span style="margin-right: 8px">材质:</span>
  <div
    cdkDropList
    cdkDropListOrientation="horizontal"
    [cdkDropListData]="texture"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
  <span *ngFor="let item of texture;let index = index" cdkDrag style="margin-right: 8px">
    <nz-input-group [nzSuffix]="suffixTemplateInfo" style="width: 160px">
      <input type="text" nz-input placeholder="请输入" [(ngModel)]="item.value" (ngModelChange)="refreshTable()"/>
    </nz-input-group>
    <ng-template #suffixTemplateInfo>
      <i nz-icon nzType="close" nzTheme="outline" (click)="removeTexture(index)"></i>
    </ng-template>
  </span>
  </div>
  <button nz-button nzType="default" (click)="appendTexture()">
    <i nz-icon nzType="plus" nzTheme="outline"></i>
  </button>
</nz-row>
<nz-row class="optionRow">
  <span style="margin-right: 8px">颜色:</span>
  <div
    cdkDropList
    cdkDropListOrientation="horizontal"
    [cdkDropListData]="color"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
  <span *ngFor="let item of color;let index = index" cdkDrag style="margin-right: 8px">
    <nz-input-group [nzSuffix]="suffixTemplateInfo" style="width: 160px">
      <input type="text" nz-input placeholder="请输入" [(ngModel)]="item.value" (ngModelChange)="refreshTable()"/>
    </nz-input-group>
    <ng-template #suffixTemplateInfo>
      <i nz-icon nzType="close" nzTheme="outline" (click)="removeColor(index)"></i>
    </ng-template>
  </span>
  </div>
  <button nz-button nzType="default" (click)="appendColor()">
    <i nz-icon nzType="plus" nzTheme="outline"></i>
  </button>
</nz-row>
<!--表格-->
<nz-table #colSpanTable [nzData]="listOfData" nzBordered nzShowPagination="false" [nzPageSize]="999"
          style="max-height: 600px;overflow-y: auto;margin-bottom: 8px">
  <thead>
  <tr>
    <th nzAlign="center">材质</th>
    <th nzAlign="center">颜色</th>
    <th nzAlign="center">规格价格</th>
    <th nzAlign="center">状态</th>
    <th nzAlign="center">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of colSpanTable.data; index as i">
    <td nzAlign="center" [attr.rowspan]="data.length" *ngIf="data.length">{{ data.texture }}</td>
    <td nzAlign="center">{{ data.color }}</td>
    <td nzAlign="center">{{ data.specification }}</td>
    <td nzAlign="center"
        [ngStyle]="{color: data.status === 0 ? 'red' : 'yellowgreen'}">{{ data.status === 0 ? '禁用' : '启用' }}</td>
    <td nzAlign="center" style="display: flex;flex-direction: row;justify-content: space-evenly">
      <a [ngStyle]="{color: data.status === 0 ? 'yellowgreen' : 'red'}">{{ data.status === 0 ? '启用' : '禁用' }}</a>
      <a>编辑</a>
      <a>预览</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<button nz-button nzType="primary" (click)="save()">保存</button>
